&lt;template&gt;
  &lt;div class="bed-control"&gt;
    &lt;div class="control-panel"&gt;
      &lt;h2&gt;床板控制面板&lt;/h2&gt;
      
      &lt;div class="status-card"&gt;
        &lt;h3&gt;当前状态&lt;/h3&gt;
        &lt;div class="status-info"&gt;
          &lt;div class="status-item"&gt;
            &lt;span class="label"&gt;靠背角度:&lt;/span&gt;
            &lt;span class="value"&gt;{{ bedStatus.backAngle }}°&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="status-item"&gt;
            &lt;span class="label"&gt;腿部角度:&lt;/span&gt;
            &lt;span class="value"&gt;{{ bedStatus.legAngle }}°&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="status-item"&gt;
            &lt;span class="label"&gt;床高:&lt;/span&gt;
            &lt;span class="value"&gt;{{ bedStatus.height }}cm&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="control-card"&gt;
        &lt;h3&gt;角度调节&lt;/h3&gt;
        &lt;div class="angle-controls"&gt;
          &lt;div class="control-group"&gt;
            &lt;label&gt;靠背角度调节&lt;/label&gt;
            &lt;div class="control-buttons"&gt;
              &lt;button @click="adjustBed('back', 'up')" :disabled="isAdjusting"&gt;
                上升
              &lt;/button&gt;
              &lt;button @click="adjustBed('back', 'down')" :disabled="isAdjusting"&gt;
                下降
              &lt;/button&gt;
              &lt;button @click="adjustBed('back', 'stop')" :disabled="!isAdjusting"&gt;
                停止
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;

          &lt;div class="control-group"&gt;
            &lt;label&gt;腿部角度调节&lt;/label&gt;
            &lt;div class="control-buttons"&gt;
              &lt;button @click="adjustBed('leg', 'up')" :disabled="isAdjusting"&gt;
                上升
              &lt;/button&gt;
              &lt;button @click="adjustBed('leg', 'down')" :disabled="isAdjusting"&gt;
                下降
              &lt;/button&gt;
              &lt;button @click="adjustBed('leg', 'stop')" :disabled="!isAdjusting"&gt;
                停止
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;

          &lt;div class="control-group"&gt;
            &lt;label&gt;床高调节&lt;/label&gt;
            &lt;div class="control-buttons"&gt;
              &lt;button @click="adjustBed('height', 'up')" :disabled="isAdjusting"&gt;
                上升
              &lt;/button&gt;
              &lt;button @click="adjustBed('height', 'down')" :disabled="isAdjusting"&gt;
                下降
              &lt;/button&gt;
              &lt;button @click="adjustBed('height', 'stop')" :disabled="!isAdjusting"&gt;
                停止
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="preset-card"&gt;
        &lt;h3&gt;预设位置&lt;/h3&gt;
        &lt;div class="preset-buttons"&gt;
          &lt;button 
            v-for="preset in presets" 
            :key="preset.name"
            @click="applyPreset(preset)"
            :disabled="isAdjusting"
          &gt;
            {{ preset.label }}
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup lang="ts"&gt;
import { ref, onMounted, onUnmounted } from 'vue'

interface BedStatus {
  backAngle: number
  legAngle: number
  height: number
  isMoving: boolean
}

interface Preset {
  name: string
  label: string
  backAngle: number
  legAngle: number
  height: number
}

const bedStatus = ref&lt;BedStatus&gt;({
  backAngle: 0,
  legAngle: 0,
  height: 50,
  isMoving: false
})

const isAdjusting = ref(false)
let statusTimer: number | null = null

const presets: Preset[] = [
  { 
    name: 'flat',
    label: '平躺位置',
    backAngle: 0,
    legAngle: 0,
    height: 50
  },
  {
    name: 'semi-fowler',
    label: '半坐卧位',
    backAngle: 30,
    legAngle: 15,
    height: 50
  },
  {
    name: 'fowler',
    label: '坐卧位',
    backAngle: 45,
    legAngle: 20,
    height: 50
  },
  {
    name: 'cardiac',
    label: '心脏位置',
    backAngle: 60,
    legAngle: 25,
    height: 55
  }
]

// 获取床位状态
const fetchBedStatus = async () =&gt; {
  try {
    const response = await fetch('/api/bed-status')
    const data = await response.json()
    bedStatus.value = data
  } catch (error) {
    console.error('获取床位状态失败:', error)
  }
}

// 调整床位
const adjustBed = async (part: string, direction: string) =&gt; {
  try {
    isAdjusting.value = direction !== 'stop'
    
    await fetch('/api/adjust-bed', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        part,
        direction
      })
    })
    
    await fetchBedStatus()
  } catch (error) {
    console.error('调整床位失败:', error)
    isAdjusting.value = false
  }
}

// 应用预设位置
const applyPreset = async (preset: Preset) =&gt; {
  try {
    isAdjusting.value = true
    
    await fetch('/api/adjust-bed', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        preset: preset.name
      })
    })
    
    await fetchBedStatus()
    isAdjusting.value = false
  } catch (error) {
    console.error('应用预设位置失败:', error)
    isAdjusting.value = false
  }
}

onMounted(() =&gt; {
  fetchBedStatus()
  // 每5秒更新一次状态
  statusTimer = window.setInterval(fetchBedStatus, 5000)
})

onUnmounted(() =&gt; {
  if (statusTimer) {
    clearInterval(statusTimer)
  }
})
&lt;/script&gt;

&lt;style scoped&gt;
.bed-control {
  padding: 20px;
}

.control-panel {
  max-width: 800px;
  margin: 0 auto;
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #1f2937;
}

.status-card,
.control-card,
.preset-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #374151;
  font-size: 1.2em;
}

.status-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #f3f4f6;
  border-radius: 6px;
}

.label {
  color: #6b7280;
}

.value {
  font-weight: 600;
  color: #1f2937;
}

.angle-controls {
  display: grid;
  gap: 20px;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.control-buttons {
  display: flex;
  gap: 10px;
}

button {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: #3b82f6;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}

button:hover:not(:disabled) {
  background: #2563eb;
}

button:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

.preset-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
&lt;/style&gt;
